@navColor: #f8f8f8;
@greenColor:#2dbe60;
html, body {
  margin: 0;
//  height: 100%;
}
//消除鼠标的选中效果。
body, canvas, div, img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
//去除微信和某些浏览器点击时出现边框。
a,button,input{
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  border: none;
  outline: none;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5em;
}

.head-nav {
  background: @navColor;
  width: 4em;
  height: 100%;
  border-right: 1px solid darken(@navColor, 10%);
  -webkit-transform: translateZ(0);
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;

  div {
    width: 2em;
    height: 2em;
    margin: 2em auto;
    position: relative;
    img {
      cursor: pointer;
      position: absolute;
      opacity: 1;
      transition: opacity 0.25s ease-in-out;
    }
    .hide-img {
      //display: none;
      opacity: 0;
      position: absolute;
      left: 0;
      transition: opacity 0.25s ease-in-out;
      img {
        cursor: default;
      }
    }
    .tip {
      margin: 0;
      position: absolute;
      top: 0;
      left: 2em;
      display: none;
      img {
        position: absolute;
        top: 0.8em;
      }
      span {
        font-size: 0.8em;
        position: absolute;
        left: 0.3em;
        top: 0.5em;
        background: #606060;
        color: #d9d9d9;
        border-radius: 2px;
        padding: 4px 7px;
      }
    }
  }
  #head-img {
    margin-top: 2em;
    margin-bottom: 6em;
  }
}
.detail-hide{
  width: 25em;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: @navColor;
  z-index: 9;
  border-right: 3px solid darken(@navColor, 15%);
  -webkit-transform: translate3d(-25em, 0, 0);
  transform: translate3d(-25em, 0, 0);
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  .title{
    color: darken(@navColor, 50%);
    cursor: default;
    text-transform: uppercase;
    padding: 1em 2em;
    font-size: 1.5em;
    border-bottom: 1px solid #ececec;
  }
  #rss-menu{
    list-style: none;
    padding: 0;
    li{
      padding:  0.5em 2em;
      cursor:pointer;
      img{
        margin-right:0.5em;
        vertical-align: bottom;
        display: inline-block;
        //          -webkit-transform: translate3d(0, 0, 0);
        //          transform: translate3d(0, 0, 0);
        //          -webkit-transition: -webkit-transform 0.4s ease-in-out;
        //          transition: transform 0.4s ease-in-out;
      }
      a{
        color: darken(@navColor, 75%);
        text-decoration: none;
        vertical-align: middle;
        line-height: 1em;
        display: inline-block;
        cursor:pointer;
      }
      &:hover{
        background: @greenColor;
//        img{
//          margin-right:1em;
//          -webkit-transform: translate3d(0.5em, 0, 0);
//          transform: translate3d(0.5em, 0, 0);
//          -webkit-transition: -webkit-transform 0.4s ease-in-out;
//          transition: transform 0.4s ease-in-out;
//        }
        a{
          color: @navColor;
        }
      }
    }
  }
}
.detail-nav{
  visibility: visible;
  -webkit-transform: translate3d(4em, 0, 0);
  transform: translate3d(4em, 0, 0);
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  z-index: 9;
  background: @navColor;
}
.container-head{
  width: 40em;
  padding:3em 0 2em 1em;
  border-bottom: 3px solid darken(@navColor,50%);
  margin: 0 auto;
  overflow: hidden;
  img{
    float: left;
  }
  div{
    color: darken(@navColor,50%);
    font-size: 1.75em;
  }
}
.container{
  width: 40em;
  margin: 0 auto;
  cursor: pointer;
  color: darken(@navColor, 50%);
  -webkit-font-smoothing: antialiased;
  .article-box{
    padding:0.5em 0.5em 0 0.5em;
    position: relative;
    overflow: hidden;
    border-bottom:1px solid darken(@navColor,20%);
    a{
      color: darken(@navColor,75%);
      text-decoration: none;
      cursor: pointer;
    }
    &:hover{
      background: @greenColor;
      color: @navColor;
      a{
        color: @navColor;
        text-decoration: none;
      }
    }
    .info{
      background: url("") -0px -0px no-repeat;
      background-size: 1.5em 1.5em;
      width: 1.5em;height: 1.5em;
      position: absolute;
      z-index: 2;
      top: 0.5em;
      right: 1em;
      cursor: pointer;
      vertical-align: top;
      &:hover{
        background: url("") -0px -0px no-repeat;
      }
    }
    .article-content{
      font-size: 0.75em;
      line-height:1.5em;
    }
    .article-detail{
      display: none;
    }
    .uptip {
      margin: 0;
      position: absolute;
      top: 1em;
      z-index: 1;
      right: 0;
      visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: -webkit-transform 0.2s ease-out;
      transition: transform 0.2s ease-out;
      span {
        font-size: 0.8em;
        left: 0.3em;
        top: 0.5em;
        background: @navColor;
        color: @greenColor;
        border-radius: 2px;
        padding: 4px 7px;
      }
    }
    .uptip-show{
      visibility: visible;
      -webkit-transform: translate3d(0, 1em, 0);
      transform: translate3d(0, 1em, 0);
      -webkit-transition: -webkit-transform 0.2s ease-out;
      transition: transform 0.2s ease-out;
    }
  }
}
.loadImg{
  width: 2em;
  height: 2em;
//  background: url("data:img/jpg;base64,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");
  margin: 0 auto;
  cursor: pointer;
}
.mask{
   background: @navColor;
   opacity: 0.4;
}
.masks{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
}
.load{
  background: url('data:img/jpg;base64,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') no-repeat center;
}
#container-img{
  width: 2em;
  height: 2em;
}
.article-area-id{
  background: darken(@navColor,20%);
}
.article-area{
  background: @navColor;
//  border: 1px solid @greenColor;
  margin: 1em auto;
  width: 90%;
  position: relative;
  z-index: 100;
//  -webkit-transform: translate3d(60em, 0, 0);
//  transform: translate3d(60em, 0, 0);
//  -webkit-transition: -webkit-transform 0.4s ease-out;
//  transition: transform 0.4s ease-out;
}
.show-article-area{
//  -webkit-transform: translate3d(0, 0, 0);
//  transform: translate3d(0, 0, 0);
//  -webkit-transition: -webkit-transform 0.4s ease-out;
//  transition: transform 0.4s ease-out;
}
.ifm{
  margin: 0 auto;
  border: 3px solid @greenColor;
  width: 60%;
  height: 0;
  position: absolute;
//  visibility: hidden;
  z-index: 9;
//  overflow-y: scroll;
  background: #fff;
  -webkit-transform: translate3d(-70em, 0, 0);
  transform: translate3d(-70em, 0, 0);
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}
.ifm-contents{
  position: fixed;
  z-index:8;
  background: @navColor;
  opacity: 0.4;
}
.close{
  background: url('data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAABG9JREFUWIXtlVtsFFUcxr/zP2cue223pbCt0gsFLOIlEgpGA4igBQWkSNKAoMZrRF5INPCgMYZEYvTBxAejRkIMYBSjNEJQUVBAEgmGPkDTULnIrWxb2F13d2Z2Zs4cHwq1NGJUmviyv8n3cGb+53xfMv9zDlCixP8Mu5HJ/N1pIBIMQBiAAACllMMYK3ovHhz5APH3Z0IGClIFYQKbWhMZdX9tbExzXI+MIcBwAxmki7lCyrp8ps/OHC5Kdx8RdVgvHHD/NsBze9Yj59n4pOWN65onPpgFBZAM1GNTqm5ZPT056bYywww5sshs34YjXRSlix6rFwSuDG4q25PW0UunO/rt7HucaFv2+R+9vwxQs3Eu1k556skjfV3jdvy2f33/M3sHC5Mb74dSYIFStyfDo955qH76fVXhGEsXs/ACH17gwQ08WJ6Fc4WLsH1nyOIM1eHRKLgyOJ7uOZgp5l9ixH7ufXrPYA0HgFz7Sch5lW23VtSu60qfFuFFdQdz7ad8AChbPI4R4w/fVTVh88Jx0+/kJJnlW5DKRwAffuDD8gtIOb3wlQeNODQiaEQQRHCkBZDP6uKVtRrprb+71tl4a2NnbvtJNRgAAMSC5NzxFVUzaiIVd6fstBF9pP5AYkmj5Ewsmjam6aN7bppY4wQW868YSzWgrJdBxk3DEBxxPazCwoQhDBYSBiKaqSKaCVNwJlFEwjTCcS36QNa1UonWxo7MlycGOnfilvnQGMFXDmriUX0WTV7z04VOqYDPmxK1H05J1lbZQR4KweDjKxdZLwuNQ5XpcVzI57zLTvqY7blHpArOArCIMS6Ijw4JfUJMN5orQ6KqPhGOEak3uzO93RO3zN/PAOCOTxeAwDfMHtu0NqzpTJCAlJpKhqplXvYJW1pQAJRSkEqiKB0llQfHhzx+qb/jXP7SJgV8oYCLv674Wg1vtPGb5wGAAeDemkj5qkkVyZaCi+M9hfSDg9uweVvrhhljG9eGhMaIMQgmoJGOohxoKgUFX/nwAldxJnAqkz3TnU695Uj/485lO3PX3T7DaNo6XzTEqucsbpjzelf61Nvi6geNE4hJMMYAxiAhEQQuwAbM3cAFQwCTh3Ak1bPvfP7yagBHO5ft/KfeAICu5bv8LuCbJcdafonrUV8AwMztj4IYgSgAkQ8GGggCIFABpJIwBYfB4uqHsyf3pp38Ck7Uc3hp+78yH8qzk9v6gSvHpyE4GAgGJ+icBipYAAz+TQ7OBA6dP2PbvrPy0NL2nv/sPAwCgN0LPoNOBFPwP8X5NWONAxMqEmZMN1a17GgzRzQAAGicwxQCIe2qtGESqE9EaGr1zS9HdeO1hbuWGyMWYOnuldA5wdQ4QkJcV6bgqCsP6c3VdWvCQn+19dsV2ogE0AUHZ0xxFUKEl6sIL1dRnlBRXjFECRXlCRXhZaqxrFKvjVWu6yukXmn77vEbCiAAYOvsTVj2/RNf7T9/osgZXXtFX23EIW8JDA3RBgii7htyL1GiRIkSAP4AeXjSp5aHbAQAAAAASUVORK5CYII=') no-repeat center;
  width: 2em;
  height: 2em;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
}

.sprite {
  background-image: url('../img/icon/spritesheet.png');
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  display: block;
  cursor:pointer;
}

.sprite-Evernote {
  background-position: -5px -5px;
}
.sprite-Evernote1 {
  background-position: -47px -5px;
}
.sprite-GitHub {
  background-position: -89px -5px;
}
.sprite-GitHub1 {
  background-position: -5px -47px;
}
.sprite-RSS {
  background-position: -47px -47px;
}
.sprite-RSS1 {
  background-position: -89px -47px;
}
.sprite-email {
  background-position: -5px -89px;
}
.sprite-email1 {
  background-position: -47px -89px;
}
.sprite-head {
  background-position: -89px -89px;
}


@media screen and (max-width:700px) {
  .head-nav{
    -webkit-transform: translate3d(-4em, 0, 0);
    transform: translate3d(-4em, 0, 0);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
  }
  .head-nav-show{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
  }
  .container-head{
    width: 80%;
  }
  .container{
    width: 80%;
  }
  .article-area{
    width: 80%;
  }
  .ifm{
    width: 80%;
    -webkit-transform: translate3d(-40em, 0, 0);
    transform: translate3d(-40em, 0, 0);
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
  }
}
.ifm-show{
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}